import 'package:base_lib/app.dart';
import 'package:base_lib/common/base/base_bloc_page.dart';
import 'package:base_lib/common/widget/peach_button.dart';
import 'package:base_lib/index.dart';
import 'package:base_lib/router/index.dart';
import 'package:base_lib/style/input_style.dart';
import 'package:base_lib/theme/theme_global.dart';
import 'package:base_lib/utils/util.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:fsuper/fsuper.dart';
import './bloc.dart';

class RegisterPhonePage
    extends BaseBlocPage<RegisterPhoneBloc, _RegisterPhonePageState> {
  RegisterPhonePage(Parameters parameters) : super(parameters);

  @override
  _RegisterPhonePageState generateThemeState() {
    return _RegisterPhonePageState();
  }
}

class _RegisterPhonePageState extends BaseBlocPageState<RegisterPhoneBloc> {
  @override
  Widget buildChild(BuildContext context, MTheme theme) {
    return Material(
      child: Scaffold(
          appBar: AppBar(
            leading: BackButton(
              onPressed: () {
                Routers.pop(context);
              },
            ),
            title: Text("注册"),
            centerTitle: true,
          ),
          body: Container(
            color: Colors.white,
            height: double.infinity,
            width: double.infinity,
            padding: EdgeInsets.symmetric(vertical: 10, horizontal: 28),
            child: SingleChildScrollView(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    "注册",
                    style: TextStyle(
                        color: Colors.black,
                        fontWeight: FontWeight.w500,
                        fontSize: 30),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 60.0),
                    child: Text(
                      "手机验证注册",
                      style: TextStyle(
                          color: Colors.black,
                          fontWeight: FontWeight.w400,
                          fontSize: 18),
                    ),
                  ),
                  Container(
                      width: double.infinity,
                      margin: EdgeInsets.only(top: 10),
                      child: _buildPhone(theme)),
                  Container(
                      width: double.infinity, child: _buildSmsCode(theme)),
                  StreamBuilder(
                    stream: bloc.loadingStatus,
                    initialData: false,
                    builder: (context, AsyncSnapshot<bool> loading) {
                      return Padding(
                        padding: const EdgeInsets.only(top: 30.0),
                        child: peachButtonBuilder(
                          onTap: () {
                            Utils.hideSoftKeyboard(context);
                            if (!loading.data) bloc.setPhone(context);
                          },
                          text: loading.data ? "请求中..." : "绑定",
                        ),
                      );
                    },
                  ),
                  Center(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        Container(
                          margin: EdgeInsets.only(top: 30),
                          child: _agreement(theme),
                        )
                      ],
                    ),
                  )
                ],
              ),
            ),
          )),
    );
  }

  @override
  RegisterPhoneBloc generateBloc() {
    return RegisterPhoneBloc();
  }

  TapGestureRecognizer userAgreementRecognizer = TapGestureRecognizer();
  TapGestureRecognizer privacyAgreementRecognizer = TapGestureRecognizer();

  void initState() {
    super.initState();
    userAgreementRecognizer.onTap = () {
      Utils.jump2WebView(context, "桃子云门诊注册协议",
          App.PATH_REMOTE_H5 + "/person/agreementRegister.html");
    };
    privacyAgreementRecognizer.onTap = () {
      Utils.jump2WebView(context, "法律声明及隐私权政策",
          App.PATH_REMOTE_H5 + "/person/statementRegister.html");
    };
  }

  @override
  ignoreWindowWidget() => true;

  ///手机号输入框
  Widget _buildPhone(MTheme theme) {
    return StreamBuilder<String>(
        stream: bloc.historyPhone.stream,
        initialData: "",
        builder: (context, snapshot) {
          return Column(
            children: [
              TextField(
                  keyboardType: TextInputType.phone,
                  maxLength: 20,
                  onChanged: (value) {
                    bloc.editPhoneChanged(value);
                  },
                  cursorColor: Colors.grey,
                  strutStyle: StrutStyle(
                      fontSize: theme.themeFontSize.fontSizeBig, height: 1),
                  style: TextStyle(
                      color: Colors.black,
                      fontSize: theme.themeFontSize.fontSizeBig),
                  decoration: InputDecoration(
                    hintText: "请输入您的密码",
                    counterText: "",
                    hintStyle: TextStyle(
                        color: theme.themeColor.themeLightGreyColor,
                        fontSize: 18),
                    border: InputBorder.none,
                  )),
              Divider(
                height: 10,
                color: theme.themeColor.themeLightGreyColor,
              )
            ],
          );
        });
  }

  ///验证码输入框
  Widget _buildSmsCode(MTheme theme) {
    return Stack(children: <Widget>[
      Column(
        children: [
          TextField(
            onChanged: (value) {
              bloc.smsCodeChanged(value);
            },
            maxLength: 20,
            keyboardType: TextInputType.number,
            cursorColor: Colors.grey,
            strutStyle: StrutStyle(
                fontSize: theme.themeFontSize.fontSizeBig, height: 1),
            style: TextStyle(
                color: Colors.black, fontSize: theme.themeFontSize.fontSizeBig),
            decoration: InputDecoration(
              hintText: "请输入您收到的验证码",
              counterText: "",
              hintStyle: TextStyle(
                  color: theme.themeColor.themeLightGreyColor, fontSize: 18),
              border: InputBorder.none,
            ),
          ),
          Divider(
            height: 10,
            color: theme.themeColor.themeLightGreyColor,
          )
        ],
      ),
      Positioned(
          right: 16,
          top: 12,
          child: StreamBuilder<int>(
              initialData: 0,
              stream: bloc.sentSmsCount.stream,
              builder: (context, snapshot) {
                return GestureDetector(
                    onTap: () async {
                      bloc.sentSms();
                    },
                    child: Text(
                      snapshot.data == 0 ? "获取验证码" : "${snapshot.data}s",
                      style: TextStyle(
                          color: snapshot.data == 0
                              ? theme.themeColor.themeColor
                              : Colors.grey,
                          fontSize: theme.themeFontSize.fontSizeNormal),
                    ));
              }))
    ]);
  }

  ///隐私协议部分
  Widget _agreement(MTheme theme) {
    return Column(children: [
      Text("登录即代表您已阅读并同意以下协议",
          style: TextStyle(
              color: theme.themeColor.themeLightGreyColor,
              fontSize: theme.themeFontSize.fontSizeSmall)),
      5.vGapDp,
      Row(
        children: [
          Expanded(
            child: Container(
              alignment: Alignment.center,
              child: GestureDetector(
                onTap: userAgreementRecognizer.onTap,
                child: Text("《桃子云门诊注册协议》",
                    style: TextStyle(
                        color: theme.themeColor.themeColor, fontSize: 13)),
              ),
            ),
          ),
          Expanded(
            child: Container(
              alignment: Alignment.center,
              child: GestureDetector(
                onTap: privacyAgreementRecognizer.onTap,
                child: Text("《法律声明及隐私权政策》",
                    style: TextStyle(
                        color: theme.themeColor.themeColor, fontSize: 13)),
              ),
            ),
          )
        ],
      ),
    ]);
  }
}
